<!-- 考勤规则 -->
<template>
	<view>
		<!-- 考勤时间 -->
		<view class="punchTime">
			<view class="blueLine"></view>
			<view class="punchTItle">
				<view class="item">考勤时间</view>
			</view>
		</view>
		<view class="rulesBox">
			<view  class="gray">工作日:</view>
			<view style="margin:10rpx 0" class="gray">周一、周二、周三、周四、周五</view>
			<view class="punchSetp">
				<view>
					<!-- 上班打卡 -->
					<view class="MyStep">
						<view class="stepLine"></view>
						<view class="stepRow1">
							<image
								class="stepIdot"
								src="../../../static/images/icon_jd1@2x.png"
								mode=""
							></image>
							<text class="stepdate">上班时间</text>
							<text class="stepdate" style="margin-left: 10rpx;">{{rulesData.time.work_shift}}</text>
						</view>
					</view>
					<!-- 下班打卡 -->
					<view class="MyStep" style="margin-top: 100rpx;">
						<view class="stepRow1">
							<image
								class="stepIdot"
								src="../../../static/images/icon_jd1@2x.png"
								mode=""
							></image>
							<text class="stepdate">下班时间</text>
							<text class="stepdate" style="margin-left: 10rpx;">{{rulesData.time.closing_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 考勤地点 -->
		<view class="punchTime">
			<view class="blueLine"></view>
			<view class="punchTItle">
				<view class="item">考勤地点</view>
			</view>
		</view>
		<view v-for="item in rulesData.area">
			<view class="placeRow">
				<uni-icons color="#139cff" type="location-filled" size="18"></uni-icons>
				<view>{{item.area_name}}</view>
			</view>
			<!-- <view class="placeF">考勤范围:{{item.distance}}米内</view> -->
		</view>
		<!-- 补卡规则 -->
		<view class="punchTime" style="margin: 30rpx 0 20rpx;">
			<view class="blueLine"></view>
			<view class="punchTItle">
				<view class="item">补卡规则</view>
			</view>
		</view>
		<view class="rulesF">缺卡后可以补卡</view>
		<view class="rulesF">{{`每个月最多补卡${rulesData.replacement.replacement_count}次,可以补过去${rulesData.replacement.replacement_time}天内的缺卡`}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				company_id: '',
				nickname: '',
				avatarUrl: '',
				rulesData: {
					time:{
						work_shift:''
					},
				},
			};
		},
		onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.getPunchRules();
			// 获取用户头像 名字
			this.nickname = uni.getStorageSync('btlh_process_nickname') || '';
			this.avatarUrl = uni.getStorageSync('btlh_process_avatarUrl') || '';
		},
		methods:{
			async getPunchRules(){
				const { data: res } = await this.$myRequest({
					url: 'ClockIn/rules',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.rulesData = res.datas
				console.log('考勤规则',this.rulesData)
			},
		}
	}
</script>

<style lang="scss" scoped>
.punchTime{
	font-size: 28rpx;
	display: flex;
	align-items: center;
	.blueLine{
		width: 10rpx;
		height: 60rpx;
		background-color: #007aff;
	}
	.punchTItle{
		width: 100%;
		padding: 0 20rpx;
		
		.item{
			padding: 20rpx 0;
			border-bottom: 1px solid #efefef;
		}
	}
}
.rulesBox{
	padding: 20rpx 30rpx;
	.gray{
		font-size: 26rpx;
		color: #999;
	}
}
.punchSetp {
	display: flex;
	justify-content: flex-start;
	box-sizing: border-box;
	padding-left: 50rpx;
	margin-top: 30rpx;
	.MyStep {
		position: relative;

		.stepLine {
			position: absolute;
			width: 2px;
			height: 140rpx;
			left: 12rpx;
			top: 22rpx;
			background-color: #40a0f2;
		}

		.stepRow1 {
			display: flex;
			align-items: center;

			.stepIdot {
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
			}

			.stepdate {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #128bf1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow:ellipsis;
			}
		}
		.waitPunch {
			color: #999;
			font-size: 26rpx;
			margin-left: 50rpx;
		}
	}
}
.placeRow{
	color: #139cff;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	padding: 20rpx 30rpx;
}
.placeF{
	padding-left: 70rpx;
	font-size: 26rpx;
	color: #333;
}
.rulesF{
	font-size: 28rpx;
	color: #666;
	padding-left: 30rpx;
	margin-top: 10rpx;
}
</style>
